import React from 'react';

import SearchTable from '@/components/common/SearchTable';
import { connect } from 'dva';

@connect((state: any) => ({
  vehicleInfo: state.vehicleInfo,
  loading: state.loading.effects['vehicleInfo/getData'],
}))
export default class UseTab extends React.Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      a3: 0,
    };
  }
  componentWillUnmount = () => {
    this.setState = (state, callback) => {
      return;
    };
  };
  onSource = (page, size, args) =>
    new Promise(async resolve => {
      const { vehicleInfo } = this.props;

      const res = await this.props.dispatch({
        type: 'vehicleInfo/getFetchPage',
        payload: {
          url: '/simcard/simflowquery',
          // iccid: '89860621257865432171',
          iccid: vehicleInfo.iccid,

          ...args,
        },
      });

      if (res && res.statusCode === '0') {
        // 生成sid
        let a1 = 1;
        let arrayNew: any = [];
        res.data.map(item => {
          arrayNew.push(Object.assign({}, item, { sid: a1++ }));
        });
        resolve({
          // total: res.data.pagination.total,
          data: arrayNew,
        });

        this.setState({
          a3: res.data.length,
        });
      } else {
        resolve({
          total: 0,
          data: [],
        });
      }
    });

  //流量kb转换成mb函数
  bytesToSize(sizes) {
    let mYsize = sizes;

    mYsize = parseFloat((mYsize / 1024).toFixed(2));

    return mYsize;
  }
  render() {
    const columns = [
      {
        title: '序号',
        dataIndex: 'sid',
      },
      {
        title: '套餐包名称',
        dataIndex: 'goodsName',
      },
      {
        title: '总流量(M)',

        dataIndex: 'totalData',
        render: (text: any) => {
          return text !== '0' ? this.bytesToSize(text) : text;
        },
      },
      {
        title: '总剩余流量(M)',
        dataIndex: 'totalDataRemain',
        render: (text: any) => {
          return text !== '0' ? this.bytesToSize(text) : text;
        },
      },
      {
        title: '当前总用量(M)',
        dataIndex: 'totalDataUsed',
        render: (text: any) => {
          return text !== '0' ? this.bytesToSize(text) : text;
        },
      },
      {
        title: '周期流量(M)',
        dataIndex: 'periodTotalData',
        render: (text: any) => {
          return text !== '0' ? this.bytesToSize(text) : text;
        },
      },
      {
        title: '当期已用流量(M)',
        dataIndex: 'periodDataUsed',
        render: (text: any) => {
          return text !== '0' ? this.bytesToSize(text) : text;
        },
      },
      {
        title: '当前剩余流量(M)',
        dataIndex: 'periodDataRemain',
        render: (text: any) => {
          return text !== '0' ? this.bytesToSize(text) : text;
        },
      },
      {
        title: '生效时间',
        dataIndex: 'activeTime',
      },
      {
        title: '过期时间',
        dataIndex: 'inactiveTime',
      },
    ];
    return (
      <>
        <SearchTable
          tableProps={{
            rowKey: 'sid',
            scroll: { x: true },
            columns: columns,
            onSource: this.onSource,
          }}
        />
      </>
    );
  }
}
